<!-- 常用查询 -->
<template>
  <div class="CommonQuery">
    <el-row>
      <el-col :span="8">
        <h4 class="font-thin padder">
          <strong>快捷查询入口</strong>
        </h4>
        <el-form style="margin: 0px" name="form1" label-width="90px">
          <el-row>
            <el-col :span="12">
              <span>查船公司</span>
              <el-input size="mini" class="input" v-model="shipNumber" placeholder="输入箱号或者提单号"></el-input>
            </el-col>
            <el-col :span="12">
              <el-select class="input" size="mini" v-model="shipNameO">
                <el-option v-for="item in shipCompany" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
              <el-button type="primary" size="mini" @click="shipGet">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-form method="get" action="http://www.fob001.cn/nb/indexcontainercheck.php" target="_blank">
          箱号检验
          <el-input v-model="boxId" class="inputMax" size="mini"></el-input>
          <el-button @click="boxGet" size="mini" type="primary">查询</el-button>
          <br>
        </el-form>
        <el-form method="get" action="http://www.weiyun001.com/NewRoute/trace" target="_blank">
          船舶定位
          <el-input v-model="boatId" class="inputMax" size="mini"></el-input>
          <el-button @click="boatGpsGet" size="mini" type="primary">查询</el-button>
          <br>
        </el-form>
        <el-form method="get" action="http://www.fob001.cn/guestbook/ypcd/checkbill.php" target="_blank">
          认提单号
          <el-input v-model="numberId" class="inputMax" size="mini"></el-input>
          <el-button @click="billNumberGet" size="mini" type="primary">查询</el-button>
          <br>
        </el-form>

        <el-form method="get" action="http://www.fob001.cn/guestbook/cbxx.php" target="_blank">
          船期计划
          <el-input v-model="boatPlan" class="inputMax" size="mini"></el-input>
          <el-button @click="shippingDateGet" size="mini" type="primary">查询</el-button>
          <br>
        </el-form>
      </el-col>
      <el-col :span="16">
        <el-col :span="8">
          <h4 class="font-thin padder">
            <strong>亿网通 和 通关宝</strong>
          </h4>
          <span class="block"><a target="_blank" href="http://dp.eptrade.cn/">亿通网登陆</a></span>
          <span class="block"><a target="_blank" href="http://www.tongguanbao.net/">通关宝查询</a></span>
          <span class="block"><a target="_blank" href="http://www.hs-bianma.com/">HS编码查询</a></span>
          <span class="block"><a target="_blank" href="http://dp.eptrade.cn/">进口商检查询</a></span>
          <span class="block"><a target="_blank" href="http://www.weiyun001.com/cost/">港杂费查询</a></span>
        </el-col>
        <el-col :span="8">
          <h4 class="font-thin padder">
            <strong>箱货信息 和 船期</strong>
          </h4>
          <span class="block"><a target="_blank" href="http://www.hb56.com/Index.aspx">港区主站登陆</a></span>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/guestbook/cbxx.php">船期计划</a></span>
          <span class="block"><a target="_blank" href="http://www.hb56.com/Main.aspx">箱货信息查询</a></span>
          <span class="block"><a target="_blank" href="http://www2.hb56.com/">港区主站备用链接</a></span>
          <span class="block"><a target="_blank" href="http://www.weiyun001.com/">八大港口船期</a></span>
        </el-col>
        <el-col :span="8">
          <h4 class="font-thin padder">
            <strong>车队实用网站</strong>
          </h4>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/chuandai.php">提箱预配查询</a></span>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/vgm_xp.php">VGM箱皮查询</a></span>
          <span class="block"><a target="_blank" href="http://eeir.sipg.com.cn/business.html">上海口岸电子EIR平台</a></span>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/duichang.php">码头及堆场电话</a></span>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/chayan_ys.php">洋山检查区</a></span>
          <span class="block"><a target="_blank" href="http://www.fob001.cn/paijihua.php">码头排计划</a></span>
          <span class="block"><a target="_blank" href="http://www.weiyun001.com/Industry/">船公司电话</a></span>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'
export default {
  data () {
    return {
      activeName: 'first',
      searchResult: [],
      yardSearch: '',
      shipNumber: '',
      shipNameO: '',
      shippingDate: '',
      shipNameT: '',
      boxId: '',
      boatId: '',
      numberId: '',
      boatPlan: '',
      // 船公司
      shipCompany: [
        { key: 'APL', value: 'APL 美总' },
        { key: 'ANL', value: 'ANL 澳航' },
        { key: 'COSCO', value: 'COSCO 中远' },
        { key: 'CMA', value: 'CMA 达飞' },
        { key: 'CSCL', value: 'CSCL 中海' },
        { key: 'CSV', value: 'CSV 南美' },
        { key: 'EMC', value: 'EMC 长荣' },
        { key: 'HANJIN', value: 'HANJIN 韩进' },
        { key: 'HAMBURG', value: 'HAMBURG 汉堡' },
        { key: 'HMM', value: 'HMM 现代' },
        { key: 'HPL', value: 'HPL 赫伯罗特' },
        { key: 'JJ', value: 'JJ 锦江' },
        { key: 'KLINE', value: 'KLINE 川崎' },
        { key: 'KMTC', value: 'KMTC 高丽海运' },
        { key: 'MCC', value: 'MCC 船公司' },
        { key: 'MOL', value: 'MOL 商船三井' },
        { key: 'MSC', value: 'MSC 地中海' },
        { key: 'MAERSK', value: 'MAERSK 马士基' },
        { key: 'NYK', value: 'NYK 日邮' },
        { key: 'OOCL', value: 'OOCL 东方海外' },
        { key: 'PIL', value: 'PIL 太平' },
        { key: 'RCL', value: 'RCL 宏海' },
        { key: 'SIT', value: 'SIT 海丰' },
        { key: 'UASC', value: 'UASC 阿拉伯' },
        { key: 'WANHAI', value: 'WANHAI 万海' },
        { key: 'YML', value: 'YML 阳明' },
        { key: 'ZIM', value: 'ZIM 以星' },
        { key: 'GOS', value: 'goldstar 金星(ZIM )' }
      ],
      yards: [
        { name: '金东暂落箱', phones: ['15601795978', '13122862828', '50122916'] },
        { name: '上海众人货物运输', phones: ['13331929690'] },
        { name: '创元六', phones: ['50490190', '50490193'] },
        { name: '浦东立昌', phones: ['58487981', '33925719', '58487975'] },
        { name: '创元二堆场', phones: ['68483085', '68483095'] },
        { name: '浦东创元', phones: ['68483706', '68483570', '68483587', '68483602'] },
        { name: '立昌三堆场', phones: ['33929783', '50675075', '50675093'] },
        { name: '创元5', phones: ['50685756'] },
        { name: '创元三堆场', phones: ['58487922', '58487955'] },
        { name: '东宝落箱', phones: ['68729388', '13661667870'] },
        { name: '浦西立昌', phones: ['33792169'] },
        { name: '德威五', phones: ['68280390'] },
        { name: '创元一堆场', phones: ['68483570', '68483571', '68485870'] },
        { name: '珉钧五', phones: ['58670379'] },
        { name: '德威五', phones: ['68280390'] },
        { name: '振标落箱外五', phones: ['13817740528'] },
        { name: '德威一', phones: ['61820131', '61820106', '61820134'] },
        { name: '德威六', phones: ['33841593', '61820130', '61820134'] },
        { name: '毅发一', phones: ['38751828'] },
        { name: '创元四堆场', phones: ['50429203'] },
        { name: '珉钧三', phones: ['38579189', '58648650', '13764725526'] },
        { name: '浦东珉钧', phones: ['68489980', '68488819', '68483369'] },
        { name: '优田二', phones: ['27699781'] },
        { name: '德威二', phones: ['58677536'] },
        { name: '德威四', phones: ['68280390'] },
        { name: '珉钧六', phones: ['58649155'] },
        { name: '东华四', phones: ['68660858', '58617166'] },
        { name: '新霸达二', phones: ['50406476', '50403342'] },
        { name: '德威八堆场', phones: ['50396178', '50396618', '61820132'] },
        { name: '东华弘信堆场/东华十堆场', phones: ['66876671'] },
        { name: '东华五', phones: ['33790277', '33790278', '56127277'] },
        { name: '东华三', phones: ['58645424', '58647426'] },
        { name: '毅发五', phones: ['58584644'] },
        { name: '长荣箱管', phones: ['38501247', '38501080'] },
        { name: '东华洋山', phones: ['58282503', '58281723', '58283399'] },
        { name: '德威七', phones: ['18221085487'] },
        { name: '浦东东亚', phones: ['58486599', '58486782'] },
        { name: '浦东集发二', phones: ['50400177', '13816364272'] },
        { name: '珉钧一分堆场', phones: ['58551018', '13818209534'] },
        { name: '安信荣城', phones: ['58648421'] },
        { name: '东华6 阿联酋箱管', phones: ['58692079'] },
        { name: '中海创元', phones: ['68483085'] },
        { name: '上港外运凌海', phones: ['50673378', '50671172'] },
        { name: '东森', phones: ['58643000'] },
        { name: '中海外贸仓储', phones: ['38600497', '38600427'] },
        { name: '现代船公司', phones: ['61820199'] },
        { name: '东华六', phones: ['58692079'] }
      ],
      preAddressesSearch: '',
      preAddresses: [
        { name: '宁波三期', phones: ['27698728'] },
        { name: '中集', phones: ['26883566'] },
        { name: '宁波大榭', phones: ['86908690'] },
        { name: '天翔一', phones: ['86897616'] },
        { name: '永大', phones: ['27688281'] },
        { name: '宏达一', phones: ['86861090'] },
        { name: '延伸', phones: ['27697231'] },
        { name: '宁波五期', phones: ['27699149'] },
        { name: '通达', phones: ['27697608'] },
        { name: '集发', phones: ['27699130'] },
        { name: '东华3', phones: ['27687500'] },
        { name: '兴合', phones: ['86860629'] },
        { name: '宁波四期', phones: ['27699131'] },
        { name: '天翔三', phones: ['27687009'] },
        { name: '宁波和欣', phones: ['86719512'] },
        { name: '高新', phones: ['86899569'] }
      ],
      sendAddressesSearch: '',
      sendAddresses: [
        { name: '金正', phones: ['15988666992'] },
        { name: '三期北方', phones: ['26897059', '13105563022'] },
        { name: '二期蓝房子', phones: ['13777225899'] },
        { name: '永大北方', phones: ['86053938'] },
        { name: '路路通', phones: ['13023730626'] },
        { name: '三期第一家小店', phones: ['13355990013'] },
        { name: '老金', phones: ['15606613986'] },
        { name: '三期第二家', phones: ['13567918678'] },
        { name: '大西', phones: ['15657808295'] },
        { name: '三期小张', phones: ['13065829475'] },
        { name: '京华茗苑', phones: ['13306745636'] },
        { name: '四期带箱', phones: ['27696600'] },
        { name: '钱塘江路老章', phones: ['13967875520'] },
        { name: '三期168', phones: ['26882148'] },
        { name: '永大老章', phones: ['18352990436'] },
        { name: '永大168', phones: ['26883006'] },
        { name: '梅山老梅', phones: ['15168170936'] },
        { name: '岔路168', phones: ['13216820180'] },
        { name: '大榭超市', phones: ['86719714'] },
        { name: '三期小郑', phones: ['13777174401'] },
        { name: '四期安徽人', phones: ['13373874969'] },
        { name: '北仑恒顺', phones: ['13355937518'] },
        { name: '四期晨港', phones: ['13626835463'] },
        { name: '永大小郑恒顺电话', phones: ['15658219989'] },
        { name: '陆丰', phones: ['26899900'] },
        { name: '陆陆发珠江路小店', phones: ['26878746'] },
        { name: '合肥', phones: ['26891185'] }
      ]
    }
  },
  computed: {
    ...mapState({
      commonQuerySearchDialogVisible: state => state.web.commonQuerySearchDialogVisible
    })
  },
  methods: {
    searchMethods (index) {
      this.searchResult = []
      let searchkey = ''
      let arr = []
      if (index === 1) {
        if (!this.preAddressesSearch) {
          this.$notify.error({
            title: '提示',
            message: '请输入关键字'
          })
        } else {
          searchkey = this.preAddressesSearch
          arr = this.preAddresses
          const re = new RegExp(searchkey, 'gi')
          arr.forEach((item) => {
            if (item.name.match(re)) {
              this.searchResult.push(item)
            }
          })
          this.updateCommonQuerySearchDialogVisible(true)
        }
      } else if (index === 2) {
        if (!this.sendAddressesSearch) {
          this.$notify.error({
            title: '提示',
            message: '请输入关键字'
          })
        } else {
          searchkey = this.sendAddressesSearch
          arr = this.sendAddresses
          const re = new RegExp(searchkey, 'gi')
          arr.forEach((item) => {
            if (item.name.match(re)) {
              this.searchResult.push(item)
            }
          })
          this.updateCommonQuerySearchDialogVisible(true)
        }
      } else {
        if (!this.yardSearch) {
          this.$notify.error({
            title: '提示',
            message: '请输入关键字'
          })
        } else {
          searchkey = this.yardSearch
          arr = this.yards
          const re = new RegExp(searchkey, 'gi')
          arr.forEach((item) => {
            if (item.name.match(re)) {
              this.searchResult.push(item)
            }
          })
          this.updateCommonQuerySearchDialogVisible(true)
        }
      }
    },
    shipGet () {
      if (this.shipNumber === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入箱号或者提单号!'
        })
      } else if (this.shipNameO === '') {
        this.$notify.error({
          title: '提示',
          message: '请选择船公司名!'
        })
      } else {
        window.open('http://www.fob001.cn/guestbook/chuangongsi/apl.php?t=' + this.shipNameO + '&c=' + this.shipNumber)
      }
    },
    shipTimeGet () {
      if (this.shippingDate === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入目的港英文!'
        })
      } else if (this.shipNameT === '') {
        this.$notify.error({
          title: '提示',
          message: '请选择船公司名!'
        })
      } else {
        window.open('http://www.fob001.cn/chuanqibiao2.php?startport=2&endport=' + this.shipNameT + '&areaid=' + this.shipingDate)
      }
    },
    boxGet () {
      if (this.boxId === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入箱号!'
        })
      } else {
        window.open('http://www.fob001.cn/nb/indexcontainercheck.php?txt=' + this.boxId)
      }
    },
    boatGpsGet () {
      if (this.boatId === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入船名称!'
        })
      } else {
        window.open('http://www.weiyun001.com/NewRoute/trace?shipname=' + this.boatId)
      }
    },
    billNumberGet () {
      if (this.numberId === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入单号!'
        })
      } else {
        window.open('http://www.fob001.cn/guestbook/ypcd/checkbill.php?txt=' + this.numberId)
      }
    },
    shippingDateGet () {
      if (this.boatPlan === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入船期!'
        })
      } else {
        window.open('http://www.fob001.cn/guestbook/cbxx.php?vessel=' + this.boatPlan)
      }
    },

    handleClick (tab, event) {
    },
    ...mapMutations({
      'updateCommonQuerySearchDialogVisible': 'web/updateCommonQuerySearchDialogVisible'
    })
  }
}
</script>

<style lang="less">
.CommonQuery {
  padding: 30px 15px 15px 15px;
  font-family: none;
  a {
    cursor: pointer;
  }
  .oper-btns {
    margin-bottom: 10px;
  }
  .col-sm-6 {
    border-bottom: 1px dotted;
  }
  .block {
    display: block;
  }
  .input {
    width: 100px;
  }
  .inputMax {
    width: 10rem;
  }
  .el-form {
    margin-top: 10px;
  }
}
</style>
